<template>
  <div class="index-frame" v-if="!(tail && low)" v-loading="!(tail && low)" style="height: 100vh"></div>
  <div class="index" v-else>
    <!-- 顶部图片 -->
    <TopPicture class="m-bt-15" />
    <!-- 搜索导航列表 -->
    <GameTypeNavigation :data="tail" @navChange="navChange($event,gotoRouter)" class="m-bt-15" />
    <div class="main">
      <div class="main-left-m">
        <!-- 游戏推荐 -->
        <WebGameList @pageChange="pageChange($event,gotoRouter)" @typeChange="typeChange($event,gotoRouter)" :data="tail" />
      </div>
      <div class="main-right-m">
        <img class="right-image"
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
        <!-- 游戏排行 -->
        <div class="m-bt-15">
          <WebGameRank :data="tail" :gameType="410" />
        </div>
        <img class="right-image"
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
      </div>
    </div>

    <div class="m-bt-15">
      <FriendLink class="m-bt-15" :data="low" />
    </div>
  </div>
</template>
  
<script setup>
import TopPicture from "@/components/TopPicture.vue";
import GameTypeNavigation from "@/components/GameTypeNavigation.vue";
import GameCard from "@/components/GameCard.vue";
import BannerLeft from "@/components/BannerLeft.vue";
import NewstRecomGame from "@/components/NewstRecomGame.vue";
import RecommendedGame from "@/components/RecommendedGame.vue";
import RecomAloneGame from "@/components/RecomAloneGame.vue";
import WebGameRank from "@/components/WebGameRank.vue";
import RecomMobileGame from "@/components/RecomMobileGame.vue";
import WebGameList from "@/components/WebGameList.vue";
import FriendLink from "@/components/FriendLink.vue";
import { onBeforeMount, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = ref(useRoute());
const params = ref(useRoute().params);
const paramsList = params.value.param.split("_");

const tail = ref(null);
const low = ref(null);
axios.get("/api/download/home/low").then(res => {
    low.value = res.data.data;
});
const pageNumber = ref(paramsList[3]||1);
const crumbVo = ref((paramsList[2]||0));
const curType = ref(paramsList[4]||"pop");
const getDatas = (isBlank=true) => {
    const { href } = router.resolve({
      name: "game-web-list",
      params: {
        param: "389_410_" +crumbVo.value +"_" +pageNumber.value +"_" +curType.value
      },
    });
    window.open(href, isBlank?"_blank":'_self');
};
const pageChange = (val,gotoRouter) => {
  pageNumber.value = val;
  getDatas(false);
}
const navChange = (val,gotoRouter) => {
  crumbVo.value = val;
  curType.value = 'pop';
  pageNumber.value = 1;
  getDatas(false);
}
const typeChange = (val,gotoRouter) => {
  curType.value = val
  pageNumber.value = 1;
  axios.get("/api/download/game/page/389_410_" + crumbVo.value + "_" + pageNumber.value + "_"+curType.value+".html").then(res => {
    tail.value = res.data.data;
  });
}
onBeforeMount(()=>{
  axios.get("/api/download/game/page/389_410_" + crumbVo.value + "_" + pageNumber.value + "_"+curType.value+".html").then(res => {
    tail.value = res.data.data;
  });
})
</script>
  
  <style lang="less" scoped>
.index {
    min-height: 500px;

    .index-content {
        background: #fff;
    }
    .main {
        display: flex;
        justify-content: space-between;

        &-left {
            width: 25%;
        }

        &-left-m {
            width: 74.5%;
        }

        &-center {
            width: 49%;
        }

        &-center-m {
            width: 100%;
        }

        &-right {
            width: 25%;
        }

        &-right-m {
            width: 25%;
        }
    }
    .right-image {
        width: 100%;
        height: 305px;
        border-radius: 8px;
    }
}
</style>
  